<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <div class="mx-auto">
    <h2 class="my-2">Enter URL for Company List XNL File</h2>

    <input class="my-1" type="text" id="fn">

    <button type="button" onclick="loadDoc()">Query</button>
  </div>
  <table class="table table-hover table-striped mt-4" id="demo"></table>

</div>

<script>
  function loadDoc() {
    const fn = document.getElementById("fn").value;
    console.log("filename: " + fn)

    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState === 4 && this.status === 200) {
        myFunction(this);
      }
    };
    xhttp.open("GET", fn, true);
    xhttp.send();
  }

  function myFunction(xml) {
    const doc = xml.responseXML;
    // 表头
    const data = doc.getElementsByTagName("Data");
    let table = "<tr class='table-header'>";
    for (let i = 0; i < data.length; i++) {
      table += "<th>" + data[i].childNodes[0].nodeValue + "</th>";
    }
    table += "</tr>";

    // 内容
    const x = doc.getElementsByTagName("Row");
    for (let i = 0; i < x.length; ++i) {

      const feeds = x[i].getElementsByTagName("Feeds")[0].getElementsByTagName("Feed");
      let feed = "";
      for (let j = 0; j < feeds.length; j++) {
        feed += feeds[j].childNodes[0].nodeValue + "<br>";
      }
      const homepage = x[i].getElementsByTagName("HomePage")[0].childNodes[0].nodeValue;
      const network = x[i].getElementsByTagName("Network")[0].childNodes[0].nodeValue;
      const owner = x[i].getElementsByTagName("Owner")[0].childNodes[0].nodeValue;
      const notes = x[i].getElementsByTagName("Notes")[0].childNodes[0].nodeValue;
      const logo = x[i].getElementsByTagName("Logo")[0].childNodes[0].nodeValue;

      console.log("logo: " + logo);
      table += `<td>${network}</td>
                <td>${owner}</td>
                <td>${feed}</td>
                <td>${notes}</td>
                <td><a href="${homepage}">
                ${homepage}
                </a></td>
                <td><img src="${logo}" alt="logo" width="100px"></td></tr>`;
      // 图片无效时显示logo
    }
    document.getElementById("demo").innerHTML = table;
  }
</script>

</body>
</html>

